<template>
  <el-dialog title="选择机器" v-model="visible" width="900px" top="5vh" append-to-body>
    <el-form ref="queryRef" :inline="true" :rules="rules" :model="queryParams">
      
      <el-form-item label="关键字">
        <el-input v-model="queryParams.HZJQBH" clearable placeholder="输入要查询的表关键字" class="w-50%" @keyup.enter="handleQuery()" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table
        ref="table"
        @row-click="clickRow"
        :data="orderTableList"
        highlight-current-row
        height="300px"
        :row-key="getRowKey"
        @current-change="handleCurrentChange">
        <el-table-column type="radio" width="55"></el-table-column>
        <el-table-column prop="hzjqbh" label="机器编号" sortable="custom" width="100" />
        <el-table-column prop="hzorder" label="机器编号" sortable="custom" width="100" />  
        <el-table-column prop="cust" label="客户" sortable="custom" width="100" />
        <el-table-column prop="cname" label="客户名称" sortable="custom" width="100" />
        <el-table-column prop="dlvdate" label="到货日期" sortable="custom" width="100" /> 
        <el-table-column prop="code" label="订单号" />
      </el-table>
      <pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" v-model:total="total" @pagination="getList" />
    </el-row>
    <template #footer>
      <el-button text @click="visible = false">取 消</el-button>
      <el-button type="primary" :disabled="!selectedRow" @click="handleImportTable">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { listsaleorder } from '@/api/buss/egfeedbackmain.js'
import { NullLogger } from '@microsoft/signalr'

const total = ref(0)
const visible = ref(false)
const selectedRow = ref(null)
const orderTableList = ref([])
const { proxy } = getCurrentInstance()

// 数据库数据 
const queryParams = reactive({
  HZJQBH: '',
  pageNum: 1,
  pageSize: 10 
})

const rules = reactive({
 // dbName: [{ required: true, message: '请选择数据库名称', trigger: 'blur' }]
})

const emit = defineEmits(['ok'])

/** Show dialog and fetch data */
function show() {
  getList()
  visible.value = true
  selectedRow.value = null // Reset selection when showing dialog
}

/** Handle row click - select the clicked row */
function clickRow(row) {
  proxy.$refs.table.setCurrentRow(row)
}

/** Handle current row change */
function handleCurrentChange(currentRow) {
  selectedRow.value = currentRow
}

/** Query table data */
function getList() { 
  listsaleorder(queryParams).then((res) => {
    orderTableList.value = res.data.result
    total.value = res.data.totalNum
  })
}

/** Search button operation */
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

/** Import button operation */
function handleImportTable() { 
  visible.value = false
  emit('ok', selectedRow.value) // Pass selected row data back
}

function getRowKey(row) {
  return row.name // Row unique id
}

defineExpose({
  show
})
</script>